<template>
    <div>
      <div class="loading" >
        <div class="wrapper">
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
        </div>
      </div>
      <div class="tip" >
        <br>
        <h1>you have bought the book!</h1>
        <br>
        <h1>Thank you!</h1>
        <input type="button" value="back" @click="back">

      </div>
    </div>
</template>

<script>

  import $ from 'jquery'
    export default {
        name: "load.vue",
        mounted(){
          setTimeout(function () {
/*            document.getElementsByClassName('tip').style.display='inline';
            document.getElementsByClassName('loading').style['display']='none';*/
            $('.loading').css('display','none');
            $('.tip').css('display','inline');
          },2000);
        },
      methods:{
          back(){
            alert("返回购物车");
            this.$router.history.replace('/home');
          }
      },

    }


</script>

<style scoped>
  .loading{
    display: inline;
  }

  .loading .wrapper{
    height: 100%;
    margin: 0 auto;
    font-size: 0;
  }
  .loading .wrapper .item{
    background-color: crimson;
    width: 15px;
    height: 0px;
    display: inline-block;
    font-size: 0;
    margin: 0 5px;
    position: relative;
    transform: translateY(145px);
  }

  .loading .wrapper .item::before{

    content: "";
    height: 50px;
    width: 15px;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: blueviolet;
  }

  .loading .wrapper .item::after{

    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
    width: 15px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: crimson;
  }

  .loading .wrapper .item:nth-child(1)::before{
    animation: loading2 2s infinite 0s;
  }
  .loading .wrapper .item:nth-child(2)::before{
    animation: loading2 2s infinite .2s;
  }
  .loading .wrapper .item:nth-child(3)::before{
    animation: loading2 2s infinite .4s;
  }
  .loading .wrapper .item:nth-child(4)::before{
    animation: loading2 2s infinite .6s;
  }
  .loading .wrapper .item:nth-child(5)::before{
    animation: loading2 2s infinite .8s;
  }


  .loading .wrapper .item:nth-child(1)::after{
    animation: loading2 2s infinite 0s;
  }
  .loading .wrapper .item:nth-child(2)::after{
    animation: loading2 2s infinite .2s;
  }
  .loading .wrapper .item:nth-child(3)::after{
    animation: loading2 2s infinite .4s;
  }
  .loading .wrapper .item:nth-child(4)::after{
    animation: loading2 2s infinite .6s;
  }
  .loading .wrapper .item:nth-child(5)::after{
    animation: loading2 2s infinite .8s;
  }

  @keyframes loading2 {
    0%{
      height: 50px;
    }
    50%{
      height: 5px;
    }
    100%{
      height: 50px;
    }

  }



  .tip{
    display: none;
  }


</style>
